<template>
	<view>
		<view class="main">
			<view class="swiper"
				style="background-color: #fff; border-radius: 15rpx; padding: 20rpx;">
				<u-swiper :list="swiperList" height="300" @click="to" :current="swiperCurrent"></u-swiper>
			</view>
			<view class="new-pannel" style="margin-top: 20rpx;background-color: #fff;" v-if="flag">
				<u-sticky offset-top="0">
					<u-tabs :list="tabList" :is-scroll="true" :current="tabCurrent" @change="tabChange"></u-tabs>
				</u-sticky>
				<view class="news-list" style="display: flex;flex-direction: column;padding: 20rpx;">
					<view class="news-item"
						style="display: flex;flex-direction: row;justify-content: space-between;padding: 20rpx 0;border-top: 2rpx solid #e4e7ed;"
						v-for="item in selectNews">
						<view class="left" style="width: 460rpx;height: fit-content;">
							<view class="top" style="display: flex;flex-direction: column;height: 168rpx;">
								<text class="title" style="font-size: 32rpx;font-weight: bold;line-height: 1.5;display: -webkit-box;
											-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;color: #303133;">{{item.title}}</text>
								<!-- <rich-text class="desc" style="display: -webkit-box;-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;overflow: hidden;font-size: 26rpx;" :nodes="item.content"></rich-text> -->
							</view>
							<view class="bar" style="display: flex;flex-direction: row;justify-content: start;font-size: 22rpx;">
								<text style="color: #909399;">{{item.readNum}} 人看过</text>
								<text style="margin-left: 20rpx;color: #909399;">{{item.likeNum}} 点赞</text>
							</view>
						</view>
						<view class="right"
							style="display: flex;justify-content: center;align-items: center;">
							<navigator :url="`/pages/news-detail/news-detail?id=${item.id}`">
								<image :src="$baseUrl + item.cover" mode="" style="width: 250rpx;height: 200rpx;"></image>
							</navigator>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [],
				tabCurrent: 0,
				newsList: [],
				tabList: [],
				newsList: [],
				flag: false,
				status: 'nomore',
				tabCurrent: 0,
				swiperList: [],
				swiperCurrent: 0
			};
		},
		onLoad() {
			this.getTab()
			this.getNews()
			this.getSwiper()
		},
		methods: {
			tabChange(index){
				this.tabCurrent = index
			},
			getTab(){
				uni.request({
					url: this.$baseUrl + '/prod-api/press/category/list',
					success: (res) => {
						console.log(res.data)
						this.tabList = res.data.data.map(item => ({
							name: item.name,
							id: item.id
						}))
						console.log(this.tabList)
					}
				})
			},
			getNews(){
				uni.request({
					url:this.$baseUrl + '/prod-api/press/press/list',
					success: (res) => {
						console.log(res.data)
						this.newsList = res.data.rows
						// this.getSelectList()
						this.flag = true
					}
				})
			},
			getSwiper(){
				uni.request({
					url: this.$baseUrl + '/prod-api/api/rotation/list',
					success: (res) => {
						console.log(res)
						this.swiperList = res.data.rows.map(item => ({
							image: this.$baseUrl + item.advImg,
							id: item.targetId
						}))
					}
				})
			},
			to(index) {
				this.swiperCurrent = index
				uni.navigateTo({
					url: `/pages/news-detail/news-detail?id=${this.swiperList[this.swiperCurrent].id}`
				})
			}
		},
		computed:{
			selectNews(){
				return this.newsList.filter(item => item.type === this.tabList[this.tabCurrent].id.toString())
			}
		}
	}
</script>

<style lang="scss">

</style>
